<template>
  <div class="box1">
    <div class="box111">
      <!-- <div class="span1"><span>门店管理</span></div> -->
      <!-- <div class="image"><img src=".\image\u8.png" /></div> -->
      <!-- <div class="span2"><span>- 系统管理 - 成员管理</span></div> -->
      <!-- <div class="qianbao">当前成员数:&nbsp;{{useCount}}</div>-->
      <el-button class="butt5" @click="userAdd" size="small"
        >新增</el-button
      >
      <div class="div2">
        <div class="div3">
          <span class="span3">数据列表</span>

          <!-- <div>
            <span class="span4">姓名:</span>
            <el-input placeholder="请输入姓名" v-model="name"></el-input>
          </div> -->
          <div>
            <span class="span5">反馈人:</span>
            <el-input
              placeholder="请输入反馈人"
              v-model="fbFormPerson"
            ></el-input>
          </div>
          <el-button class="butt1" type="primary" size="small" @click="load"
            >搜索</el-button
          >

          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column
              prop="feedbackFormNumber"
              label="编号"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="fbFormAdvice"
              label="反馈信息"
              width="200"
            ></el-table-column>
            <!-- <el-table-column prop="sex" label="性别" width="100">
              <template slot-scope="scope">
                {{ sexType(scope.row.sex) }}
              </template>
            </el-table-column> -->
            <el-table-column
              prop="fbFormPerson"
              label="反馈人"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="offerTime"
              label="时间"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="offerState"
              label="状态"
              width="160"
            ></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
          <div v-if="scope.row.offerState=='正在进行'"> 
                <el-button type="primary" @click="huifu(scope.row)"
                  >回复</el-button
                ></div>
                <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="del(scope.row.id)"
          >
          <el-button type="danger" slot="reference"
                  >删除</el-button
                >  
          </el-popconfirm>
         <div v-if="scope.row.offerState=='已结束'"> 
                          <el-button type="success" @click="chakan(scope.row)"
                  >查看</el-button
                ></div>
                
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <el-dialog title="业绩查看" :visible.sync="dialogFormVisiblee" width="50%">

          <el-table :data="tableDataa" @selection-change="handleSelectionChange">
      <el-table-column prop="month" label="月份" width="150"></el-table-column>
      <el-table-column prop="visitFrequency" label="上门次数" width="100"></el-table-column>
         <el-table-column prop="recoveryFrequency" label="回收次数" width="100"></el-table-column>
        <el-table-column prop="deliveryFrequency" label="送货次数" width="150"></el-table-column>
        <el-table-column prop="income" label="收入(币)" width="180"></el-table-column>
    </el-table>

</el-dialog> -->

        <el-dialog
          title="反馈申请"
          :visible.sync="dialogFormVisible"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form label-width="80px" :model="form" :rules="rules" ref="forms">

            <el-form-item
              label="反馈信息"
              :label-width="formLabelWidth"
              prop="fbFormAdvice"
            >
              <el-input v-model="form.fbFormAdvice" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
              label="反馈人"
              :label-width="formLabelWidth"
              prop="fbFormPerson"
            >
              <el-input v-model="form.fbFormPerson" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsave">取 消</el-button>
            <el-button type="primary" @click="save" :loading="logining"
              >确 定</el-button
            >
          </div>
        </el-dialog>




                <el-dialog
          title="反馈"
          :visible.sync="dialogFormVisiblea"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form label-width="80px" :model="formm" :rules="rules" ref="formss">
                        <el-form-item
              label="编号"
              :label-width="formLabelWidth"
              prop="feedbackFormNumber"
            >
              <el-input v-model="formm.feedbackFormNumber" autocomplete="off"></el-input>
            </el-form-item>

                                    <el-form-item
              label="反馈信息"
              :label-width="formLabelWidth"
              prop="fbFormAdvice"
            >
              <el-input v-model="formm.fbFormAdvice" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
              label="反馈人"
              :label-width="formLabelWidth"
              prop="fbFormPerson"
            >
              <el-input v-model="formm.fbFormPerson" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
              label="时间"
              :label-width="formLabelWidth"
              prop="offerTime"
            >
              <el-input v-model="formm.offerTime" autocomplete="off"></el-input>
            </el-form-item>

  <el-form-item
              label="回复信息"
              :label-width="formLabelWidth"
              prop="huifuinfo"
            >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formm.huifuinfo">
          </el-input>
 </el-form-item>
                 
                    <!-- <el-form-item label="物品图片">
                            <el-upload
                    action="http://127.0.0.1:8088/villagepersonnel/personnel-info/addPic"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPrevieww"
                    :on-remove="handleRemovee"
                    :on-success="checkCardd"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisiblee">
                    <el-image width="100%" :src="goodsPicturee" alt="" />
                  </el-dialog>
            
        </el-form-item> -->


          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsavee">取 消</el-button>
            <el-button type="primary" @click="savee" :loading="logining"
              >确 定</el-button
            >
          </div>
        </el-dialog>


                        <el-dialog
          title="反馈"
          :visible.sync="dialogFormVisibleaa"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form label-width="80px" :model="formmm" :rules="rules" ref="formss">
                        <el-form-item
              label="编号"
              :label-width="formLabelWidth"
              prop="feedbackFormNumber"
            >
              <el-input v-model="formmm.feedbackFormNumber" autocomplete="off"></el-input>
            </el-form-item>

                                    <el-form-item
              label="反馈信息"
              :label-width="formLabelWidth"
              prop="fbFormAdvice"
            >
              <el-input v-model="formmm.fbFormAdvice" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
              label="反馈人"
              :label-width="formLabelWidth"
              prop="fbFormPerson"
            >
              <el-input v-model="formmm.fbFormPerson" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
              label="时间"
              :label-width="formLabelWidth"
              prop="offerTime"
            >
              <el-input v-model="formmm.offerTime" autocomplete="off"></el-input>
            </el-form-item>

  <!-- <el-form-item
              label="回复信息"
              :label-width="formLabelWidth"
              prop="huifuinfo"
            >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formmm.huifuinfo">
          </el-input>
 </el-form-item> -->
                 
                        <div class="block">
          <span class="demonstration">评价</span>
          <el-rate
            v-model="value2"
            :colors="colors">
          </el-rate>
        </div>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsaveee">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
let user = localStorage.getItem("user")
  ? JSON.parse(localStorage.getItem("user"))
  : null;
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      form: {

      },
      value2: 4,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      formm:{},
      formmm:{},
      dialogFormVisibleaa:false,
      dialogFormVisiblea:false,
      dialogVisiblee:false,
      dialogFormVisible: false,
      dialogFormVisiblee: false,
      tableData: [],
      tableDataa: [],
      goodsPicturee:"",
      name: "",
      useCount: "",
      fbFormPerson: "",
    };
  },
  created() {
    this.load();
    //  this.tableData.goodsInfo.createTime= this.timestampToTime(this.tableData.goodsInfo.createTime)
    //  this.useCountFind();
    //  this.handlsEditt();
  },
  methods: {

        handlePictureCardPrevieww(file) {
      this.goodsPicturee = file.url;
      this.dialogVisiblee = true;
    },
        handleRemovee(file, fileList) {
      console.log(file, fileList);
    },
        checkCardd(file) {
          this.form.headPhoto=file
      console.log(file);
    },

    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    load() {
      this.$axios
        .get("/villagepersonnel/feedback-form/feedbackforminfo", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            fbFormPerson: this.fbFormPerson,
          },
        })
        .then((res) => {
          console.log(
            "----------" + JSON.stringify(res.data.data.villagepersonnelinfo)
          );

          this.tableData = res.data.data.villagepersonnelinfo.records;
          this.total = res.data.data.villagepersonnelinfo.total;
        })
        .catch((err) => {
          console.error(err);
        });
    },
        del(id) {
      // this.form =JSON.parse(JSON.stringify(row));
      //       this.dialogFormVisible = true;
          this.$axios
      .get("/villagepersonnel/feedback-form/deleteInfo/"+id
      )
      .then((res) => {
           if(res.data.code=='20000'){
                this.$message.success("删除成功");
                 this.load()
              }
              else {
                  this.$message.error("删除失败");
                }
      })
      .catch((err) => {
        console.error(err);
      });
    },
    sexType(sex) {
      if (sex == 1) {
        return "男";
      } else {
        return "女";
      }
    },

    chakan(row){
         this.formmm = JSON.parse(JSON.stringify(row));
          this.dialogFormVisibleaa = true;
    },
    huifu(row){

              this.formm = JSON.parse(JSON.stringify(row));
      //  alert(this.formm.id)
          //  this.goodsPicturee = row.headPhoto
          //  alert(this.goodsPicturee)

          this.dialogFormVisiblea = true;

    },

    handlsEdit(row) {
      
    if(row.sex =='1'){
            row.sex ='1'
      }else{
        row.sex='2'
      }
      this.form = JSON.parse(JSON.stringify(row));
       //alert(this.form.id)
          //  this.goodsPicturee = row.headPhoto
          //  alert(this.goodsPicturee)

          this.dialogFormVisible = true;
    },

    userAdd(){
      // this.form=''
       this.dialogFormVisible = true;
    },

    unsave() {
      this.dialogFormVisible = false;
    },
        unsavee() {
      this.dialogFormVisiblea = false;
    },
    unsaveee(){
 this.dialogFormVisibleaa = false;
    },

    savee() {
     
      this.$refs["formss"].validate((valid) => {
        if (valid) {
          if (this.formm.id) {
            this.$axios
              .post("/villagepersonnel/feedback-form/updatedInfo", this.formm)
              .then((res) => {
                if (res.data.code == "20000") {
                  this.$message.success("修改成功");


                  this.dialogFormVisiblea = false;
                  this.load();
                } else {
                  this.$message.error("修改失败");
                }
              })
              .catch((err) => {
                console.error(err);
              });
          } 
          // else {
          //   this.$axios
          //     .post("/villagepersonnel/personnel-info/addInfo", this.form)
          //     .then((res) => {
          //       if (res.data.code == "20000") {
          //         this.$message.success("添加成功");
          //         this.dialogFormVisible = false;
          //         this.load();
          //         this.useCountFind();
          //       } else {
          //         this.$message.error("添加失败");
          //       }
          //     })
          //     .catch((err) => {
          //       console.error(err);
          //     });
          // }
        }
      });
    },
    save() {
     
      this.$refs["forms"].validate((valid) => {
        if (valid) {
          // if (this.form.id) {
          //   this.$axios
          //     .post("/villagepersonnel/personnel-info/updatedInfo", this.form)
          //     .then((res) => {
          //       if (res.data.code == "20000") {
          //         this.$message.success("修改成功");
          //         this.dialogFormVisible = false;
          //         this.load();
          //       } else {
          //         this.$message.error("修改失败");
          //       }
          //     })
          //     .catch((err) => {
          //       console.error(err);
          //     });
          // } else {
            this.$axios
              .post("/villagepersonnel/feedback-form/addInfo", this.form)
              .then((res) => {
                if (res.data.code == "20000") {
                  this.$message.success("添加成功");
                  this.dialogFormVisible = false;
                  this.load();
                  this.useCountFind();
                } else {
                  this.$message.error("添加失败");
                }
              })
              .catch((err) => {
                console.error(err);
              });
          // }
        }
      });
    },
  },
};
</script>

<style scoped>
.box1 {
  position: relative;
  height: 880px;
  background-color: rgba(247, 248, 253, 1);
}
.box111 {
  position: absolute;
  width: 100%;
  height: 280px;
  background-color: rgba(181, 191, 209);
}
.span1 {
  position: absolute;
  top: 45px;
  left: 320px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
.span2 {
  position: absolute;
  top: 48px;
  left: 455px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 14px;
}
.qianbao {
  position: absolute;
  top: 48px;
  left: 1120px;
  font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
}
.butt5 {
  position: absolute;
  top: 43px;
  left: 1290px;
  border-radius: 6px;
  width: 100px;
  height: 33px;
  color: #32325d;
}
.image {
  position: absolute;
  top: 46px;
  left: 425px;
  font-size: 14px;
}
.div2 {
  position: absolute;
  top: 100px;
  left: 70px;
  background-color: rgba(255, 255, 255, 1);
  width: 1300px;
  height: 688px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  border-radius: 8px;
}
.div3 {
  position: absolute;
  top: 18px;
  left: 0px;
  height: 30px;
  width: 1300px;
}
.span3 {
  float: left;
  font-size: 17px;
  color: #32325d;
  line-height: 30px;
  margin-left: 22px;
  font-weight: 500;
}
.span4 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 262px;
  font-weight: 500;
}
.el-input >>> .el-input__inner {
  width: 172px;
  height: 32px;
}
.el-input {
  float: left;
  width: 0px;
  margin-left: 10px;
}
.span5 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 202px;
  font-weight: 500;
}
.span6 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 12px;
}
.butt1 {
  float: left;
  border-radius: 6px;
  width: 82px;
  height: 30px;
  margin-left: 200px;
}

.el-select .el-input {
  width: 202px;
  height: 20px;
}
.el-select {
  position: relative;
  right: 242px;
}
</style>